<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="el-icon-s-platform"></i>
        <span>{{ $t("system.systems") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="tag in tags" :key="tag" :label="$t(tag)" :name="tag">
        </el-tab-pane>
      </el-tabs>
      <router-view />
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
export default {
  components: {
    Page,
  },
  methods: {
      handleClick(tab){
          const name = tab.$el.id.replace("pane-", "");
          if (name == this.$route.name) return;
          this.$router.push({
              name,
              query: {page:1, per_page:20}
          })
      }
  },
  data() {
    return {
      activeName: this.$route.name,
      tags: [
        "system.package_list",
        "system.package_changelog",
        "configure.changelog",
        "configure.list",
      ],
    };
  },
};
</script>

<style>
</style>